<template>
  <view class="home overflow-y">
    <!-- header -->
    <view class="header">
      <!-- header search -->
      <view class="header-search flex-row align-center">
        <image class="header-logo" src="./assets/logo.png" />

        <view
          class="search flex-row justify-center align-center"
          @click="onSearch"
        >
          <uni-icons
            class="input-uni-icon"
            type="search"
            size="16"
            color="#ffd3d5"
          />

          <text class="input-label">股票代码/简拼</text>
        </view>
        <image class="customer-service" src="./assets/service.png" />

        <image class="message" src="./assets/message.png" @click="toMsgBox" />
      </view>
    </view>

    <!-- menu -->
    <view class="menu justify-center">
      <view class="menu-wrap">
        <view
          class="menu-item"
          v-if="sysConfig.is_xgsg == 1"
          @click="jump(`/pages/newApply/index?name=${sysConfig.is_xgsg_name}`)"
        >
          <image
            class="menu-img"
            mode="widthFix"
            src="./assets/new-stock.png"
          />
          <text class="menu-label">{{ sysConfig.is_xgsg_name }}</text>
        </view>
        <view class="menu-item" @click="jump('/pages/shengou/index')">
          <image class="menu-img" mode="widthFix" src="./assets/my-stock.png" />

          <text class="menu-label">我的新股</text>
        </view>

        <view
          class="menu-item"
          v-if="sysConfig.dz_syshow == 1"
          @click="jump(`/pages/dzjy/index?name=${sysConfig.dz_syname}`)"
        >
          <image
            class="menu-img"
            mode="widthFix"
            src="./assets/transaction.png"
          />

          <text class="menu-label">{{ sysConfig.dz_syname }}</text>
        </view>

        <view
          class="menu-item"
          v-if="sysConfig.is_xxps == 1"
          @click="
            jump(`/pages/shares/offline-list?name=${sysConfig.is_xxps_name}`)
          "
        >
          <image
            class="menu-img"
            mode="widthFix"
            src="./assets/placement.png"
          />
          <text class="menu-label">{{ sysConfig.is_xxps_name }}</text>
        </view>

        <view class="menu-item" @click="jump('/pages/selfSelect/index')">
          <image class="menu-img" mode="widthFix" src="./assets/optional.png" />
          <text class="menu-label">我的自选</text>
        </view>
        <view class="menu-item" @click="hushen">
          <image
            class="menu-img"
            mode="widthFix"
            src="./assets/market-condition.png"
          />

          <text class="menu-label">沪深行情</text>
        </view>
        <view
          class="menu-item"
          @click="jump('/pages/silverCertificateTransfer/index?tabIndex=0')"
        >
          <image
            class="menu-img"
            mode="widthFix"
            src="./assets/transfer-accounts.png"
          />

          <text class="menu-label">银证转账</text>
        </view>
        <view
          class="menu-item"
          v-if="sysConfig.is_xgsg == 1"
          @click="jump('/pages/newApply/index')"
        >
          <image
            class="menu-img"
            mode="widthFix"
            src="./assets/stock-calendar.png"
          />
          <text class="menu-label">新股日历</text>
        </view>

        <view
          class="menu-item"
          v-if="sysConfig.is_dy == 1"
          @click="jump(`/pages/shares/vipjy?name=${sysConfig.vip_syname}`)"
        >
          <image class="menu-img" mode="widthFix" src="./assets/operate.png" />
          <text class="menu-label">{{ sysConfig.vip_syname }}</text>
        </view>
      </view>
    </view>

    <!-- banner -->
    <view class="banner-wrap">
      <swiper class="banner" :indicator-dots="false" :autoplay="true">
        <swiper-item v-for="(item, index) in banner" :key="index">
          <image :src="item.image_text" mode="widthFix"></image>
        </swiper-item>
        <!-- 	<swiper-item>
					<image src="./assets/banner1.png" mode="widthFix"></image>
				</swiper-item> -->
      </swiper>
    </view>

    <view class="tabs tui-skeleton-rect">
      <v-tabs
        paddingItem="0 30rpx"
        v-model="tabIndex"
        bgColor="transparent"
        color="#797979"
        activeColor="#000000"
        activeFontSize="36rpx"
        :tabs="tabs"
        pillsColor="#fff"
        lineHeight="0"
        pills
      ></v-tabs>
    </view>

    <!-- list -->
    <view class="list-wrap tui-skeleton-rect">
      <swiper
        :style="{ height: height }"
        :current="tabIndex"
        @change="swiperChange"
      >
        <swiper-item v-for="(tab, i) in tabs" :key="i">
          <mescroll-item
            @init="skeletonShow = false"
            ref="mescrollItem"
            :i="i"
            :index="tabIndex"
            :tabs="tabs"
            :height="height"
          ></mescroll-item>
        </swiper-item>
      </swiper>
    </view>

    <!-- 新股批量申购 -->
    <tui-modal
      :show="showDialog"
      padding="0"
      custom
      @cancel="showDialog = false"
      backgroundColor="transparent"
    >
      <view class="animate__animated animate__swing animate__faster dialog-w">
        <view class="text-center text-lg">新股批量申购</view>
        <view class="text-center text-nomal margin-top-sm"
          >今日有{{ newStock.count }}只新股可以申购</view
        >

        <view
          class="dialog-cell"
          v-for="(item, index) in newStock.list"
          :key="index"
          @click="toNew(item)"
        >
          <image class="img" src="/static/images/icons/sh.png" mode=""></image>
          <view class="flex-sub">{{ item.name }}</view>
          <view class="text-red">{{ item.fx_price }}</view>
        </view>
        <tui-button
          class="dialog-btn"
          @click="toNewStock"
          margin="30rpx 0 0 0"
          type="theme"
          :size="28"
          height="80rpx"
          >查看当日新股</tui-button
        >
      </view>
    </tui-modal>
  </view>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { getNewStock, getZqTip, getBanner } from '@/api/index';
  import { useMainStore } from '@/store';

  // 组件

  import vTabs from '@/components/v-tabs/v-tabs.vue';
  import MescrollItem from './comp/index-swiper-item.vue';

  defineOptions({
    name: 'TabbarIndex',
  });

  const { sysConfig, getConfig } = useMainStore();
  console.log('sysConfig', sysConfig);

  const constants = reactive({});
  const skeletonShow = ref(true);
  const height = ref('');

  const showDialog = ref(false);

  // tabs
  const tabIndex = ref(0);
  const tabs = reactive(['国内经济', '国外经济', '证券要闻', '公司资讯']);

  const newStock = reactive({
    count: 0,
    list: [],
  });

  // banner
  const banner = ref([]);

  // 加载数据(新股新股批量申购 与 banner)
  const loadData = async () => {
    try {
      const [res, res1] = await Promise.all([getNewStock(), getBanner()]);
      console.log('loadData res', res);
      console.log('loadData res1', res1);

      // newStock
      if (res.code == 1) {
        newStock.count = res.data.list_sg_count;
        newStock.list = res.data.list_sg;

        //
        let names = newStock.list.map((v) => v.name).join(',');
        if (
          newStock.count > 0 &&
          uni.getStorageSync('newStockNotic') != names
        ) {
          showDialog.value = true;
          uni.setStorageSync('newStockNotic', names);
        }
      }

      // banner
      if (res1.code == 1) {
        banner.value = res1.data.list;
      }
    } catch (err) {
      console.error('loadData', err);
    }
  };

  const getZq = async () => {
    try {
      const res = getZqTip();
      console.log('getZq res', res);
    } catch (err) {
      console.error('getZq', err);
    }
  };

  // 搜索
  const onSearch = () => {
    uni.navigateTo({
      url: '/pages/search/index',
    });
  };
  // 新股申购
  // const onNewApply = () => {
  // 	uni.navigateTo({
  // 		url: '/pages/newApply/index',
  // 	});
  // };

  // 跳转
  const jump = (url) => {
    uni.navigateTo({
      url,
    });
  };
  // 我的自选
  // const onSelf = () => {
  // 	uni.navigateTo({
  // 		url: '/pages/selfSelect/index',
  // 	});
  // };

  // 沪深
  const hushen = () => {
    uni.setStorageSync('INDEX', 1);
    uni.switchTab({
      url: '/pages/market/index',
    });
  };

  // 消息中心
  const toMsgBox = () => {
    uni.navigateTo({ url: '/pages/msgBox/index' });
  };

  onLoad(() => {
    // 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
    height.value = uni.getSystemInfoSync().windowHeight - uni.upx2px(86) + 'px';
  });

  onShow(async () => {
    await getConfig();
    // 获取数据
    loadData();

    //
    if (uni.getStorageSync('token')) {
      getZq();
    }
  });
</script>

<style lang="scss" src="./css/index.scss" scoped></style>
